{% if existing_cards %}
<legend>{{ text_credit_card }}</legend>
<div>
  <div id="choose-card" class="form-group">
    <label class="col-sm-2 col-form-label">{{ entry_card }}</label>
    <div class="col-sm-10">
      <div class="form-check form-check-inline">
        <label> <input type="radio" name="existing-card" value="1" class="form-check-input" checked="checked"/>
          {{ entry_card_existing }}
        </label>
      </div>
      <div class="form-check form-check-inline">
        <label> <input type="radio" name="existing-card" value="0" class="form-check-input"/>
          {{ entry_card_new }}
        </label>
      </div>
    </div>
  </div>
</div>
<form id="payment-existing-form" action="{{ form_submit }}" method="post">
  <fieldset>
    <div id="card-existing">
      <div class="form-group row required">
        <label class="col-sm-2 col-form-label" for="token">{{ entry_cc_choice }}</label>
        <div class="col-sm-10">
          <select name="token" data-worldpay="token" class="form-control">
            {% for existing_card in existing_cards %}
              <option value="{{ existing_card.token }}">{{ text_card_type }} {{ existing_card.type }}, {{ text_card_digits }} {{ existing_card.digits }}, {{ text_card_expiry }} {{ existing_card.expiry }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="d-inline-block pt-2 pd-2 w-100">
        <div class="float-right">
          <button type="button" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_delete_card }}</button>
        </div>
      </div>
      <div class="form-group row required">
        <label class="col-sm-2 col-form-label" for="input-cc-cvc">{{ entry_cc_cvc }}</label>
        <div class="col-sm-10">
          <input type="text" data-worldpay="cvc" value="" size="4" placeholder="{{ entry_cc_cvc }}" id="input-cc-cvc" class="form-control"/>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="d-inline-block pt-2 pd-2 w-100">
    <div class="float-right">
      <button type="submit" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_confirm }}</button>
    </div>
  </div>
</form>
<form style="display: none" id="payment-new-form" action="{{ form_submit }}" method="post">
  {% else %}
  <form id="payment-new-form" action="{{ form_submit }}" method="post">
    {% endif %}
    <fieldset>
      <div class="form-group row">
        <div class="col-sm-11" id='paymentDetailsHere' style="margin-left: 3%"></div>
      </div>
      {% if worldpay_card %}
        <div class="form-group row">
          <label class="col-sm-2 col-form-label" for="input-cc-save">{{ entry_card_save }}</label>
          <div class="col-sm-2">
            <input type="checkbox" name="save-card" value=true id="input-cc-save"/>
          </div>
        </div>
      {% endif %}
      </div>
    </fieldset>
    <div class="d-inline-block pt-2 pd-2 w-100">
      <div class="float-right">
        <button type="submit" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary">{{ button_confirm }}</button>
      </div>
    </div>
  </form>
  <div id="payment-errors">
  </div>
  <script type="text/javascript"><!--

  //Load Worldpay.js and run script functions
  $.getScript("{{ worldpay_script }}", function(data, textStatus, jqxhr) {
	  Worldpay.setClientKey("{{ worldpay_client_key }}");

	  // disable new card form if existing cards
    {% if existing_cards %}
	  $('#payment-new-form :input').prop('disabled', true);
    {% endif %}

	  // Set if token is reusable, remove first value when Worldpay update
	  Worldpay.reusable = true;
    {% if recurring_products %}
	  Worldpay.reusable = true;
    {% else %}
	  $('input[name=\'save-card\']').on('change', function() {
		  if ($(this).is(':checked')) {
			  Worldpay.reusable = true;
		  } else {
			  Worldpay.reusable = false;
		  }
	  });
    {% endif %}

	  Worldpay.templateSaveButton = false;
	  Worldpay.useTemplate('payment-new-form', 'paymentDetailsHere', 'inline', function(obj) {
		  var _el = document.createElement('input');
		  _el.value = obj.token;
		  _el.type = 'hidden';
		  _el.name = 'token';
		  document.getElementById('payment-new-form').appendChild(_el);
		  document.getElementById('payment-new-form').submit();
	  });

	  //Submit form
	  $('input[type=\'submit\']').on('click', function() {
		  var existing = $('input[name=\'existing-card\']:checked').val();
		  if (existing === '1') {
			  var form = document.getElementById('payment-existing-form');
			  Worldpay.useForm(form, function(status, response) {
				  if (response.error || status != 200) {
					  Worldpay.handleError(form, document.getElementById('payment-errors'), response.error);
				  } else {
					  form.submit();
				  }
			  }, true);
		  } else {
			  Worldpay.submitTemplateForm();
		  }
	  });
  });

  //Delete a card
  $('#button-delete').on('click', function() {
	  var token = $('select[name=\'token\'] option:selected');

	  if (confirm('{{ text_confirm_delete }}\n' + token.text())) {
		  $.ajax({
			  url: 'index.php?route=extension/payment/worldpay/deleteCard',
			  type: 'post',
			  data: {token: token.val()},
			  dataType: 'json',
			  beforeSend: function() {
				  $('#button-delete').button('loading');
			  },
			  complete: function() {
				  $('#button-delete').button('reset');
			  },
			  success: function(json) {
				  if (json['error']) {
					  alert(json['error']);
				  }

				  if (json['success']) {
					  alert(json['success']);
					  if (json['existing_cards']) {
						  token.remove();
					  } else {
						  $('input[name=\'existing-card\'][value=0]').click();
						  $('#choose-card').remove();
						  $('#payment-existing-form').remove();
					  }
				  }
			  }
		  });
	  }
  });

  // enable or disable forms based on exiting or new card option
  $('input[name=\'existing-card\']').on('change', function() {
	  if (this.value === '1') {
		  $('#payment-existing-form').show();
		  $('#payment-new-form').hide();
		  $('#payment-new-form :input').prop('disabled', true);
		  $('#payment-existing-form :input').prop('disabled', false);
	  } else {
		  $('#payment-existing-form').hide();
		  $('#payment-new-form').show();
		  $('#payment-new-form :input').prop('disabled', false);
		  $('#payment-existing-form :input').prop('disabled', true);
	  }
  });
  //--></script>
